<template>
  <div class="main-page">
    <Card v-for="(item, index) in pages" :key="item.id" :class="{ 'hover-card': item.hover }"
      @mouseenter="hover(index, true)" @mouseleave="hover(index, false)" @click="toArticle(item.id)" height="200px"
      class="card" padding="0px">
      <div class="article">
        <p class="article-title" :class="{ 'hover-title': item.hover }">{{ item.title }}</p>
        <p class="article-abstract">{{ item.abs }}</p>
        <p class="article-date">{{ item.date }}</p>
      </div>
      <div :class="{ 'hover-img': item.hover }" class="img">
        <img :src="item.img" alt="封面图没加载出来">
      </div>
    </Card>
  </div>
</template>
<script lang="ts" setup>
import Card from '../../components/Card/Card.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

//获取文章列表
import { getArticleList } from '@/https/api';
let pages = ref([{   //文章列表
  id: 1,
  title: 'LOADING...',
  abs: '正在加载，或者加载不出来了',
  date:2000,
  img: '',
  hover: false
}])
getArticleList().then((res) => {  //获取文章列表
  if (res) {    //因为instance中配置了拦截器，报错时不会返回任何东西
    pages.value = res.data
  }
})

//跳转至文章

const toArticle = (id: number) => {
  console.log('发送请求', id);
  router.push({
    name: 'article',
    query: {
      id
    }
  })
}

const hover = (index: number, enter: boolean) => {
  pages.value[index].hover = enter
}
</script>
<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: row;
  transition: 0.5s;
  cursor: pointer;

  &:nth-child(2) {
    margin: 15px 0px;
  }

  &:nth-child(even) {
    flex-direction: row-reverse;
  }

  .article {
    width: 60%;
    padding: 20px;
    display: flex;
    flex-direction: column;


    &-title {
      font-size: $title-size;
      color: $theme-color-text;
      font-family: '苍耳2';
    }

    .hover-title {
      color: $theme-color;
    }

    &-abstract {
      color: $theme-color-info;
      line-height: $info-line-height;
      flex-grow: 1;
    }

    &-date{
      color: $theme-color-info;
    }
  }

  .img {
    width: 40%;
    overflow: hidden;
    position: relative;
    transition: 0.5s;

    // box-shadow: 0 0 10px;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      left: 50%;
      transform: translate(-50%);
    }
  }

  .hover-img {
    box-shadow: 0 0 10px;
  }
}

$theme-boder: rgb(197, 197, 197);

.hover-card {
  transform: translateX(5px);
  border-bottom: 1px solid $theme-boder;
}
</style>